<template>
  <div class="purchase-warehousing-page">
    <!-- 查询区域 -->
    <el-form :inline="true" :model="searchForm" class="search-form" style="margin-left:10px">
      <el-form-item label="入库单编号">
        <el-input v-model="searchForm.code" placeholder="请输入入库单编号" clearable />
      </el-form-item>
      <el-form-item label="入库单名称">
        <el-input v-model="searchForm.name" placeholder="请输入入库单名称" clearable />
      </el-form-item>
      <el-form-item label="供应商名称">
        <el-input v-model="searchForm.supplier" placeholder="请输入供应商名称" clearable />
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input v-model="searchForm.orderNo" placeholder="请输入订单编号" clearable />
      </el-form-item>
      <el-form-item label="入库日期">
        <el-date-picker v-model="searchForm.date" type="date" placeholder="请选择入库日期" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-button type="success" @click="">新增</el-button>
    <el-table :data="tableData" border style="width: 100%; margin-top: 16px;">
      <el-table-column prop="code" label="入库单编号" width="250" />
      <el-table-column prop="name" label="入库单名称" width="250" />
      <el-table-column prop="supplier" label="供应商名称" width="250" />
      <el-table-column prop="date" label="入库日期" width="250" />
      <el-table-column prop="orderNo" label="采购订单号" width="250" />
      <el-table-column prop="status" label="单据状态" width="250" />
      <el-table-column label="操作" width="300">
        <template #default="scope">
          <el-button type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-bar">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :page-sizes="[10, 20, 50, 100]"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const searchForm = ref({
  code: '',
  name: '',
  supplier: '',
  orderNo: '',
  date: null
})

const tableData = ref([
  // 示例数据，实际请用接口返回数据替换
  { code: 'R20250603001', name: '测试', supplier: '供应商', date: '2025-06-03', orderNo: '65461654', status: '待上架' },
  { code: 'R20250602009', name: '纯面_0602', supplier: '供应商', date: '2025-06-02', orderNo: 'TONG0602', status: '待上架' },
])
const total = ref(2)
const pageSize = ref(10)
const currentPage = ref(1)

function handleSearch() {
  // TODO: 调用接口，带上 searchForm.value 作为参数
}
function handleReset() {
  searchForm.value = { code: '', name: '', supplier: '', orderNo: '', date: null }
  handleSearch()
}
function handleSizeChange(size) {
  pageSize.value = size
  handleSearch()
}
function handlePageChange(page) {
  currentPage.value = page
  handleSearch()
}
</script>

<style lang="less" scoped>
.purchase-warehousing-page {
  padding: 24px;
  background: #fff;
  min-height: 100vh;
}
.search-form {
  max-width: 1100px;
  margin: 0 auto 16px auto;
  padding: 20px 32px 8px 32px;
  background: #fafbfc;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.search-form .el-form-item {
  flex: 1 1 260px;
  max-width: 320px;
  margin-bottom: 0;
}
.pagination-bar {
  margin: 24px 0 0 0;
  display: flex;
  justify-content: flex-end;
}
</style>
